{% extends "base.html" %}

{% block title %}Orders - PinCaiCai 2.0{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>My Orders</h2>
    <div id="orders-container">
        <!-- Orders will be dynamically loaded via JavaScript -->
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    loadOrders();
});

function loadOrders() {
    fetch('/api/orders')
        .then(response => response.json())
        .then(data => {
            const container = document.getElementById('orders-container');
            if (data.orders && data.orders.length > 0) {
                let html = '';
                
                data.orders.forEach(order => {
                    html += `
                        <div class="card mb-3">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h5>Order #${order.order_id || order.id}</h5>
                                <span class="badge bg-${getStatusColor(order.status)}">${getStatusText(order.status)}</span>
                            </div>
                            <div class="card-body">
                                <p><strong>Order Number:</strong> #${order.order_id}</p>
                                <p><strong>Order Time:</strong> ${new Date(order.created_at).toLocaleString()}</p>
                                <p><strong>Total Amount:</strong> ¥${order.total_price}</p>
                                
                                <h6>Product List:</h6>
                                <div class="table-responsive">
                                    <table class="table table-sm">
                                        <thead>
                                            <tr>
                                                <th>Product Name</th>
                                                <th>Unit Price</th>
                                                <th>Quantity</th>
                                                <th>Subtotal</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                    `;
                    
                    order.items.forEach(item => {
                        html += `
                            <tr>
                                <td>${item.name}</td>
                                <td>¥${item.price}</td>
                                <td>${item.quantity}</td>
                                <td>¥${(item.price * item.quantity).toFixed(2)}</td>
                            </tr>
                        `;
                    });
                    
                    html += `
                                        </tbody>
                                    </table>
                                </div>
                                
                            </div>
                        </div>
                    `;
                });
                
                container.innerHTML = html;
            } else {
                container.innerHTML = '<div class="text-center"><p>No orders yet</p><a href="/all" class="btn btn-primary">Go Shopping</a></div>';
            }
        })
        .catch(error => {
            console.error('Error loading orders:', error);
            document.getElementById('orders-container').innerHTML = '<div class="text-center"><p>Failed to load orders</p></div>';
        });
}

function getStatusColor(status) {
    switch(status) {
        case 'confirmed': return 'info';
        case 'shipped': return 'primary';
        case 'delivered': return 'success';
        case 'cancelled': return 'danger';
        default: return 'success';
    }
}

function getStatusText(status) {
    switch(status) {
        case 'confirmed': return 'Confirmed';
        case 'shipped': return 'Shipped';
        case 'delivered': return 'Delivered';
        case 'cancelled': return 'Cancelled';
        default: return 'Completed';
    }
}

</script>
{% endblock %}
